<template>
	<div v-if="props.value.incognitoMode" class="flex items-center">
		<n-popover
			arrow-class="gg"
			trigger="hover"
			:show-arrow="true"
			:style="{
				'--n-color': 'var(--color-bg-5)'
			}">
			<template #trigger>
				<div class="cursor-help flex items-center text-t-2">
					<base-icon name="stealth" class="mr-[2px]" size="20" />
					{{ $t('app.hidden') }}
				</div>
			</template>
			<div class="bg-bg-5 rounded-lg px-3 py-1">
				{{ $t('app.userActivateHidden') }}
			</div>
		</n-popover>
	</div>
	<div v-else class="flex items-center cursor-pointer text-t-1" @click="handleProfile">
		<account-vip :vipImg="value?.vipLevel?.levelIcon || ''" class="mr-1" />
		{{ props.value.username }}
	</div>
</template>
<script lang="ts" setup>
import { NPopover } from 'naive-ui'
import { BaseIcon } from '@/components/base'
import AccountVip from '@/components/account/account-vip/index.vue'
import { useProfileStore } from '@/store'
import { UpSwitchTabsEnum } from '@/components/up'
const profileStore = useProfileStore()
// import { t } from '@/utils'
const props = defineProps({
	value: {
		type: <any>{},
		default: {}
	}
})
const handleProfile = () => {
	profileStore.showProfile({
		show: true,
		userId: props.value.userId,
		tab: UpSwitchTabsEnum.casino
	})
}
// const getFormatUser = () => {
//     if (props.value.incognitoMode) {
//         return t('app.hidden')
//     } else {
//         return props.value.username
//     }
// }
</script>
